<template>
  <div class="resume-page">
    <div v-if="!isAuthenticated" class="auth-container">
      <div class="auth-box">
        <input
          v-model="inputPassword"
          type="password"
          class="password-input"
          placeholder="请输入密码"
          @keyup.enter="checkPassword"
        />
        <button class="auth-btn" @click="checkPassword">确定</button>
        <div v-if="errorMsg" class="error-msg">{{ errorMsg }}</div>
      </div>
    </div>
    <div v-else class="resume-content">
      <div ref="resumeContent" class="resume-main">
        <div v-if="resumeHtml" v-html="resumeHtml"></div>
        <div v-else class="loading">正在加载简历...</div>
      </div>
      <button class="export-btn floating-btn" @click="exportPDF">导出为 PDF</button>
    </div>
  </div>
</template>

<script>
import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'
export default {
  name: 'Resume',
  data() {
    return {
      inputPassword: '',
      isAuthenticated: false,
      errorMsg: '',
      resumeHtml: ''
    }
  },
  methods: {
    checkPassword() {
      const correctPassword = '123456'; // 你可以自定义密码
      if (this.inputPassword === correctPassword) {
        this.isAuthenticated = true;
        this.errorMsg = '';
        this.loadResumeHtml();
      } else {
        this.errorMsg = '密码错误，请重试';
      }
    },
    async loadResumeHtml() {
      try {
        const res = await fetch('/src/docs/a1nl1-q8xs4.html');
        const text = await res.text();
        // 只取 <body> 内部内容
        const bodyMatch = text.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
        this.resumeHtml = bodyMatch ? bodyMatch[1] : text;
      } catch (e) {
        this.resumeHtml = '<div style="color:red">简历加载失败</div>';
      }
    },
    async exportPDF() {
      const content = this.$refs.resumeContent;
      const canvas = await html2canvas(content);
      const imgData = canvas.toDataURL('image/png');
      const pdf = new jsPDF('p', 'mm', 'a4');
      const pageWidth = pdf.internal.pageSize.getWidth();
      const pageHeight = pdf.internal.pageSize.getHeight();
      const imgProps = pdf.getImageProperties(imgData);
      const pdfWidth = pageWidth;
      const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
      pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
      pdf.save('自动化测试工程师_蔡博_17131151157.pdf');
    }
  }
}
</script>

<style scoped>
.resume-page {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.auth-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60vh;
}
.auth-box {
  background: #fff;
  padding: 32px 24px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(66,133,244,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.password-input {
  padding: 10px 16px;
  border: 1px solid #4285f4;
  border-radius: 6px;
  font-size: 1.1rem;
  margin-bottom: 16px;
  outline: none;
}
.auth-btn {
  background: #4285f4;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 24px;
  font-size: 1.1rem;
  cursor: pointer;
  margin-bottom: 8px;
}
.error-msg {
  color: #e53935;
  margin-top: 8px;
  font-size: 1rem;
}
.resume-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.resume-main {
  background: #f8f9fa;
  padding: 32px 40px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(66,133,244,0.08);
  margin-bottom: 24px;
  min-width: 320px;
  max-width: 900px;
  overflow-x: auto;
}
.export-btn {
  background: #10B981;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 32px;
  font-size: 1.1rem;
  cursor: pointer;
}
.export-btn:hover {
  background: #059669;
}
.floating-btn {
  position: fixed;
  top: 100px;
  right: 340px;
  z-index: 1000;
  box-shadow: 0 5px 8px rgba(66,133,244,0.15);
  transition: background 0.2s, color 0.2s;
}
.loading {
  color: #888;
  font-size: 1.2rem;
  text-align: center;
  padding: 40px 0;
}
</style> 